<template>
    <div class="app-container calendar-list-container">
        <div class="filter-container">
            <el-input
                    @keyup.enter.native="getData"
                    clearable
                    v-model="listQuery.sectionNo"
                    style="width: 150px;margin-right:15px;margin-top:7px"
                    class="filter-item"
                    placeholder="请输入工段编号"
            ></el-input>
            <el-input
                    @keyup.enter.native="getData"
                    clearable
                    v-model="listQuery.onenetDeviceId"
                    style="width: 180px;margin-right:15px;margin-top:7px"
                    class="filter-item"
                    placeholder="请输入oneNET设备编号"
            ></el-input>
            <el-button class="filter-item" type="primary" v-waves icon="el-icon-search" @click="getData">搜索</el-button>
        </div>

        <!-- 表单 -->
        <el-table :data="dealList" v-loading="listLoading" element-loading-text="拼命加载中"  stripe border fit highlight-current-row style="width: 100%">
            <el-table-column  label="序号" type="index" align="center"/>
            <el-table-column  label="oneNET信息ID" prop="onenetId" align="center"/>
            <el-table-column  label="oneNET设备ID" prop="onenetDeviceId" align="center"/>
            <el-table-column  label="oneNET设备名称" prop="onenetDeviceName" align="center"/>
            <el-table-column  label="工段编号" prop="sectionNo" align="center"/>
            <el-table-column  label="oneNET产品名称" prop="onenetProduceId" align="center"/>
            <el-table-column  label="oneNeT鉴权信息" prop="authentication" align="center"/>
            <!-- 对oneNET进行修改与删除 -->
            <el-table-column  label="操作" align="center" width="230"  v-if="userInfo.roleId != 37">
            <template slot-scope="scope" >
                <el-button size="mini" type="primary" @click="handleEdit(scope.row)">修改</el-button>
                <el-button size="mini" type="danger" @click="handleDelete(scope.$index,scope.row)">删除</el-button>
            </template>
            </el-table-column>
        </el-table>

           <!-- pagination 分页 -->
        <div class="pagination-container">
            <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="listQuery.page"
            :page-sizes="[5,10, 20, 30, 40,100,300,500]"
            :page-size="listQuery.limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            ></el-pagination>
        </div>

        <!-- 修改工段信息弹出表单 -->
        <el-dialog title="oneNET信息修改" :visible.sync="dialogFormVisible" width="700px">
            <el-form :model="modifyform">
                <el-form-item label="oneNET信息ID" :label-width="formLabelWidth">
                    <el-input v-model="modifyform.onenetId" disabled style="width:400px"/>
                </el-form-item>
                <el-form-item label="oneNET设备ID" :label-width="formLabelWidth">
                    <el-input v-model="modifyform.onenetDeviceId" style="width:400px" />
                </el-form-item>
                <el-form-item label="oneNET设备名称" :label-width="formLabelWidth">
                    <el-input v-model="modifyform.onenetDeviceName" style="width:400px" />
                </el-form-item>
                <el-form-item label="工段编号" :label-width="formLabelWidth">
                    <el-input v-model="modifyform.sectionNo" style="width:400px" />
                </el-form-item>
                <el-form-item label="oneNET产品名称" :label-width="formLabelWidth">
                    <el-input v-model="modifyform.onenetProduceId" style="width:400px" />
                </el-form-item>
                <el-form-item label="oneNET鉴权信息" :label-width="formLabelWidth">
                    <el-input v-model="modifyform.authentication" style="width:400px" />
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="modifyWorkSec">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { updateOneNetInfo, DelOnenetInfo, getOneNetInfoPage } from '../../api/oneNET.js'
export default {
    data() {
        return {
            listQuery: {
                page: 1,
                limit: 10,
                sectionNo: '',
                onenetDeviceId: ''
            },
            modifyform: {
                onenetId: '',
                onenetDeviceId: '',
                onenetDeviceName: '',
                sectionNo: '',
                onenetProduceId: '',
                authentication: ''
            },
            dealList: '',
            total: '',
            listLoading: false,
            dialogFormVisible: false,
            formLabelWidth: '180px',
            userInfo: this.$store.state.user.userInfo,
        }
    },
    methods: {
      // 搜索按钮定义的函数
      async handleFilter() {
        this.listLoading = true
        let query = Object.assign({},this.listQuery)
        const data = await getOneNetInfoPage(query)
        this.dealList = data.data.records
        this.total = data.data.total
        this.listLoading = false
      },
    // 删除用户按钮,使用elementui的messageBox弹框组件
    handleDelete(index,row) {
      this.$confirm('这将会永久删除该行数据，是否继续?', '警告', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }).then(async () => {
          let res = await DelOnenetInfo({onenetId: row.onenetId})
          this.dealList.splice(index, 1)
          console.log(res)
          this.$message({
            type: 'success',
            message: '删除成功'
          })
        }).catch(() => {
          this.$message({
            type: 'info', 
            message: '已取消删除'
          })
        })
    },
    // 将弹框修改后的工段信息传入后台，并且消息提示是否修改成功
      async modifyWorkSec() {
        this.dialogFormVisible = false
        let query = Object.assign({},this.modifyform)
        const data = await updateOneNetInfo(query)
        if(data.code == '1'){
          this.$message({
            message: '修改成功',
            type: 'success'
          })
          this.handleFilter()
        } else {
          this.$message({
            message: '修改失败',
            type: 'warning'
          })
        }
      },
      // 点击修改按钮，将table表的内容传入弹框内部的表单
      // item为一行的表单数据，为一个对象
      handleEdit(item) {
        console.log(item)
        this.modifyform = Object.assign({},item)
        this.dialogFormVisible = true
      },
      handleSizeChange(val) {
        this.listQuery.limit = val
        this.handleFilter()
      },
      handleCurrentChange(val) {
        this.listQuery.page = val
        this.handleFilter()
      },
      getData() {
        this.listQuery.page = 1
        this.listQuery.limit = 10
        this.handleFilter()
      },
    },
    // 在生命周期函数调用"搜索"按钮绑定的函数，显示已有的数据
    mounted() {
    this.handleFilter();
        },
}
</script>

<style>

</style>